<template>
	<!-- 出场和到场弹窗 -->
	<view class="popup-box">
		<view class="content">
			<view class="head">
				<image class="icon" src="/static/img/common/horn.png"></image>
				<text v-if="type === '1'">出场信息确认</text>
				<text v-else-if="type === '2'">到场信息确认</text>
				<text v-else-if="type === '3'">终点地址选择</text>
			</view>
			<view class="title" v-if="type === '1'">出场项目</view>
			<view class="title" v-else-if="type === '2'">到场项目</view>
			<scroll-view scroll-y class="scroll-box">
				<RadioComp class="item" :info="item" id='id' name='startingPlace' :nowId="nowProject.id"
					v-for="item in list" :key="item.id" @click="changeProject(item)" />
			</scroll-view>
			<view class="buttons">
				<Button3 class="cancel" @click="btnClick(0)">取消</Button3>
				<Button3 @click="btnClick(1)">确认</Button3>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, watchEffect } from 'vue';
	import RadioComp from '@/components/radioComp/radioComp.vue';
	import Button3 from '@/components/button3/button3.vue';
	const emits = defineEmits(['offPopup'])
	const props = defineProps({
		type: {
			type: String,
			default: '1'
		},
		list: {
			type: Array,
			default: () => ([])
		}

	})
	const nowProject = ref(props.list[0])

	/* watchEffect(() => {
		if (props.list.length) {
			let nowItem = props.list.find(item => item.id === props.nowItemId)
			if (nowItem) {
				nowProject.value = nowItem
			}
		}
	}) */
	// 改变项目
	const changeProject = (item) => {
		nowProject.value = item
	}
	// 按钮点击
	const btnClick = (type : number) => {
		// 导航地址的选择
		if (props.type === '3') {
			/* if (type === 1) {
				let location = JSON.parse(nowProject.value?.electronicFence)
				if (location !== '') {
					location = location.data[0]
				}
				uni.openLocation({
					latitude: location[1],
					longitude: location[0],
					name: nowProject.value?.terminalPointName,
					address: nowProject.value?.terminalPointAddress,
				})
			} */
			emits('offPopup', { type, location: 1, nowAddr: nowProject.value })
		} else {
			emits('offPopup', { type, location: 0, nowAddr: nowProject.value })
			// emits('offPopup', type === 1 ? nowProject.value : null)
		}

	}
</script>

<style scoped lang="scss">
	.popup-box {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.content {
		padding: 42rpx 48rpx 48rpx;
		width: 578rpx;
		height: 550rpx;
		font-size: 28rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;

		.head {
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				margin-right: 18rpx;
				width: 74rpx;
				height: 65rpx;
			}
		}

		.scroll-box {
			margin: 20rpx 0rpx 20rpx;
			height: 250rpx;

			.item {
				margin-bottom: 24rpx;
			}
		}


		.buttons {
			display: flex;
			width: 100%;

			.btn {
				flex: 1;
			}

			.cancel {
				margin-right: 16rpx;
			}
		}
	}
</style>